<template>
  <div id="aside" class="el_menu_container">
    <el-menu
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="rgb(28, 28, 28)"
    text-color="#8699ad"
    active-text-color="white"
    router
    >
      <div class="logo-container">
        <img src="../assets/images/书本.jpg"/>
        <span v-if="!isCollapse">书籍商城后台</span>
      </div>
      <template v-for="(item, index) in menus" :key="index">
        <el-menu-item
        v-if="!item.children && !item.hidden"
        :index="item.path"
        @click="handleMenu(item)"
        >
          <template #default>
            <component :is="item.icon" class="icon_style"></component>
            <span>{{ item.label }}</span>
          </template>
        </el-menu-item>
      <el-sub-menu v-else :index="item.name">
        <template #title>
          <el-icon :name="item.icon"></el-icon>
          <span>{{ item.label }}</span>
        </template>
        <template v-for="subItem in item.children" :key="subItem.path">
          <el-menu-item :index="subItem.path" @click="handleMenu(subItem)">
            <template #default>
              <span>{{ subItem.label }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref,computed } from 'vue';
import { useMenuStore } from '../store/menu.js'
import { useRoute } from "vue-router"
const route = useRoute();
const menuStore = useMenuStore();
const menus = ref(menuStore.menuData);
const  isCollapse= computed(() => menuStore.isCollapse)
const defaultActive = computed(() => route.path.split('/admin/')[1])
const handleMenu = (item) => {
  menuStore.updateBreadcrumb(item)
  menuStore.updateTag(item);
};
</script>

<style lang="scss" scoped>
#aside {
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
  .logo-container {
    height: 60px;
    padding: 10px 5px 10px 10px;
    margin: auto;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-around;
    img{
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
    }
    span{
      font-weight: 500;
      font-size: 20px;
      display: flex;
      align-items: center;
      color: white;
    }
  }
  .icon_style{
    width: 18px;
    padding: 1px 5px 1px 2px;
  }
  :deep(.el-menu-item){
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    margin:0px;
    &:hover{
      color: white;
      background-color: transparent;
    }
  }
  :deep(.el-menu-item.is-active){
    background-color: rgba(39,100,253);
    color: rgb(255, 255, 255);
    margin: 0px;
    border-radius: 8px;
  }
  .el-menu-item.is-active:hover {
    background-color:  rgba(39,100,253); /* 保持选中项的悬停样式不变 */
    color: rgb(255, 255, 255);
  }
  .el-menu-item:hover:not(.is-active) {
      background-color:  transparent /* 鼠标悬浮时添加背景色，排除选中项 */
  }
}
</style>